<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <title>商品分类</title>
    <link rel="stylesheet" href="./css/style.min.css">
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body class="cate-body">
    <div id="goods-pg" class="cl">
        <header class="cl">
            <div class="nav-bar cl" v-show="header.show">
                <span class="goback arrow_l" @click="goback"></span>
                <span class="page-name" v-cloak>{{shop_name}}会员店</span>
            </div>
            <div class="search-bar">
                <div class="search-inp-wrap cl">
                    <div class="form-col search-inp">
                        <input type="text" v-model="keyword" placeholder="请输入商品名" @keyup.enter="searchfn">
                        <button type="button" @click="searchfn"><i class="search-ico"></i></button>
                    </div>
                </div>
            </div>
        </header>
        <div class="main cl">
            <div class="left-nav" :class="{'weixin': !header.show}">
                <nav-li :list="catedata" v-on:getdata="getCompData"></nav-li>
            </div>
            <div class="right-main">
                <catelist :cateprops="compdata"></catelist>
            </div>
        </div>
        <div class="t-footer">
            <ul class="t-ul-box counts-ul-box">
                <li><a :href="home_link" class="t-home"><i class=""></i>首页</a></li>
                <li><a :href="cate_link" class="t-classification-select"><i class=""></i>分类</a></li>
                 <li>
                    <a :href="coupon_link" class="t-coupon">
                        <!-- <span class="counts" v-cloak >{{count}}</span>  -->
                        <i class=""></i>
                        优惠券
                        </a>
                </li>
                <li><a :href="cart_link" class="t-shopping-cat"><span class="counts" v-cloak v-if="cart_counts>0">{{cart_counts}}</span><i class=""></i>购物车</a></li>
                <li><a :href="mycenter_link" class="t-my"><i class=""></i>我的</a></li>
            </ul>
        </div>
        <div class="loading" v-show="loading"></div>
    </div>
    <script type="text/template" id="cate-list">
    <div>
        <dl>
            <dd class="cl">
                <a href="#" @click.prevent="cate_link(cat_group.cat_id)" v-for="cat_group in cateprops">{{cat_group.cat_name}}</a>
            </dd>
<!--             <dd class="cl" v-else>
                <ul>
                    <li>暂无子分类</li>
                </ul>
            </dd> -->
        </dl>
    </div>
    </script>
    <script type="text/template" id="nav-li">
        <ul class="cate-menu cl">
            <li v-for="(cate,i) in list" :class="{active:act_flag==i}" @click="classfn(i)"><a href="#" >{{cate.cat_name}}</a></li>
        </ul>
    </script>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script type="text/javascript" src="./js/min/common.min.js"></script>
    <script>
        var store_id = APP.getQueryString("storeid");
        Vue.component("catelist", {
            template: "#cate-list",
            props: ['catettl', 'cateprops'],
            data: function() {
                return {

                }
            },
            methods: {
                cate_link: function(m) {
                    window.location.href = "goods-list.html?storeid=" + store_id + "&cid=" + m
                }
            },
            computed: {

            }
        });
        Vue.component('nav-li', {
            template: "#nav-li",
            props: ['list'],
            data: function() {
                return {
                    act_flag: 0,
                    navcate: this.list
                }
            },
            methods: {
                classfn: function(n) {
                    this.act_flag = n;
                    this.$emit("getdata", [this.list[n].cat_id]);
                    // console.log(this.list[n].cat_id)
                }
            }
        });
        var cate = new Vue({
            el: "#goods-pg",
            data: {
                header: {
                    show: !APP.iswechat()
                },
                loading:true,
                message: "hello!",
                chkdata: "",
                catedata: [],
                shop_catedata:[],
                compdata: [],
                store_id: APP.getQueryString("storeid"),
                shop_name: '',
                cart_counts: "",
                shop_logo: '',
                comp_data: '',
                keyword: '',
                golist: "goods-list.html?storeid=" + store_id,
                home_link:"home.html?storeid="+store_id,
                cate_link:"category.html?storeid="+store_id,
                coupon_link:"c-call-center.html?storeid="+store_id,
                cart_link:"cart.html?storeid="+store_id+"&version="+APP.version,
                mycenter_link:"personal-center.html?storeid="+store_id
            },
            mounted: function() {
                this.loading=true;
                var that = this;
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                    this.shop_logo = APP.getCookie('shoplogo');
                }.bind(this), function(arg) {
                    this.shop_logo = arg.body.data.shop.shop_logo;
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
                // Vue.http.get(APIPHP + "index.php?r=goods/index/cate&storeid=" + store_id).then(function(_res) {
                //     var tmp_data=_res.body.data;
                //     for (var k = 0; k < tmp_data.length; k++) {
                //         if (tmp_data[k]['is_show']==1) {
                //         cate.catedata.push(tmp_data[k])
                //         }
                //     }

                // });

                 Vue.http.get(APIPHP+'index.php?r=goods/index/shop-cate&storeid='+store_id,{emulateJSON: true}).then(function (shop_res) {
                    that.shop_catedata=shop_res.body.data;
                    for (var i = 0; i < that.shop_catedata.length; i++) {
                        if (that.shop_catedata[i]['is_show']==1) {
                        that.catedata.push(that.shop_catedata[i])
                        }
                    }
                    setTimeout(function(){
                        that.compdata = []; 
                        for (var m = 0; m < that.catedata.length; m++) {
                            if(that.catedata[m]['child']&&that.catedata[m]['is_show']==1) {
                                    for (var j = 0; j < that.catedata[m]['child'].length; j++) {
                                        that.compdata.push(that.catedata[0]['child'][j])
                                    }
                                    break;
                            }
                        }
                    },0)
                })
                // for (var j = 0; j < that.catedata[0]['child'].length; j++) {
                //     that.compdata.push(that.catedata[0]['child'][j])
                // }
                that.loading=false;
           
                Vue.http.get(APIJAVA + 'c/mobile/cart/count?shopId=' + this.store_id).then(function(_res) { //获取购物车数量
                    cate.cart_counts = _res.body.obj;
                }, function(_res) {
                    console.log("err")
                });

            },
            methods: {
                goback: function() {
                    window.history.go(-1);
                },
                chk: function() {
                    this.chkdata = !this.chkdata;
                },
                searchfn: function() {
                    window.location.href = 'goods-list.html?storeid=' + store_id + '&keyword=' + this.keyword;
                },
                getCompData: function(n) {
                    this.compdata = [];
                    var _n = parseInt(n);
                    for (var i = 0; i < this.catedata.length; i++) {
                        if (this.catedata[i]['cat_id'] == _n&&this.catedata[i]['child']) {
                            for (var j = 0; j < this.catedata[i]['child'].length; j++) {
                                // this.compttl.push(this.catedata[i]['child'][j]);
                                this.compdata.push(this.catedata[i]['child'][j])
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>